/* eslint-disable no-param-reassign */
/* eslint-disable import/prefer-default-export */
/* eslint-disable class-methods-use-this */
/* eslint-disable no-unused-vars */
/* eslint-disable max-classes-per-file */
import Konva from 'konva'
import { ElMessageBox } from 'element-plus'
import { IKonvaPen } from '@/components/konvaUnits/tools/IKonvaPen'
import { useStore } from '@/store/index'

export class TextPen implements IKonvaPen {
  beginPillar!: { id: ''; x: 0; y: 0; rotation: 0; width: 0; height: 0 }

  endPillar!: { id: ''; x: 0; y: 0; rotation: 0; width: 0; height: 0 }

  status: 'waiting' | 'drawing' | 'disable' = 'waiting'

  points!: number[]

  beginPos!: number[]

  endPos!: number[]

  angle: number = 0

  text: number[] = [0]

  konvaGroup!: Konva.Group

  mousedown(layer: Konva.Layer, points: number[], node: object): void {
    console.log(this.status)
    if (points === undefined || this.status === 'disable') return
    this.status = 'drawing'
    this.beginPos = points
    this.points = points
    this.createText(layer, points, 10)
  }

  mousemove(points: number[]): void {
    this.endPos = points
  }

  mouseup(points: number[], node: object): void {}

  clean(): void {
    if (this.konvaGroup) this.konvaGroup.remove()
    this.points = [0, 0, 0, 0]
    this.beginPos = [0, 0]
    this.endPos = [0, 0]
    this.status = 'waiting'
  }

  click(points: any): void {}

  createText(layer: Konva.Layer, start: number[], scale: number) {
    const store = useStore()
    const id = `textGroup${store.drawing.history.size + 1}`
    const textGroup = new Konva.Group({ id })
    // const text = new Konva.Group({ id: `${id}-text`, draggable: true })

    const arrow = new Konva.Arrow({
      points: [start[0], start[1] - 25, start[0], start[1]],
      pointerLength: 4,
      pointerWidth: 3,
      fill: 'green',
      stroke: 'green',
      strokeWidth: 1
    })
    const arrowRect = new Konva.Rect({
      x: start[0] - 3,
      y: start[1] - 3,
      strokeWidth: 0,
      width: 6,
      height: 6,
      draggable: true
    })
    const textNode = new Konva.Text({
      id,
      text: '添加文字',
      x: start[0] - 20,
      y: start[1] - 40,
      align: 'center',
      fill: 'green',
      fontSize: scale
      // draggable: true
    })
    const rect = new Konva.Rect({
      x: start[0] - 25,
      y: start[1] - 45,
      stroke: '#555',
      strokeWidth: 1,
      fill: '#ddd',
      width: textNode.width() + 10,
      height: textNode.height() + 10,
      draggable: true
    })
    textNode.on('mousemove', () => {
      layer.getParent().container().style.cursor = 'text'
    })
    textNode.on('mouseout', () => {
      layer.getParent().container().style.cursor = 'crosshair'
    })

    rect.on('mousemove', () => {
      this.status = 'disable'
      layer.getParent().container().style.cursor = 'pointer'
    })
    rect.on('mouseout', () => {
      if (this.status !== 'disable') this.status = 'drawing'
      layer.getParent().container().style.cursor = 'crosshair'
    })
    rect.on('dragmove', () => {
      textNode.x(rect.x() + 5)
      textNode.y(rect.y() + 5)
      arrow.points([
        rect.x() + rect.width() / 2,
        rect.y() + rect.height(),
        arrow.points()[2],
        arrow.points()[3]
      ])
    })
    textNode.on('dblclick', () => {
      const textPosition = textNode.getAbsolutePosition()
      const stageBox = layer.getParent().container().getBoundingClientRect()
      const areaPosition = {
        x: stageBox.left + textPosition.x,
        y: stageBox.top + textPosition.y
      }
      const textarea = document.createElement('textarea')
      document.body.appendChild(textarea)
      textarea.value = textNode.text()
      textarea.style.position = 'absolute'
      textarea.style.top = `${areaPosition.y - 5}px`
      textarea.style.left = `${areaPosition.x - 5}px`
      textarea.style.width = textNode.width()
      textarea.style.border = 'none'
      textarea.style.padding = '0px'
      textarea.style.margin = '0px'
      textarea.style.overflow = 'hidden'
      textarea.style.outline = 'none'
      textarea.style.resize = 'none'
      textarea.focus()

      function handleOutsideClick(e: any) {
        if (e.target !== textarea) {
          textNode.text(textarea.value)
          textNode.x(arrow.points()[0] - textNode.width() / 2)
          textNode.y(arrow.points()[1] - textNode.height())
          rect.width(textNode.width() + 10)
          rect.height(textNode.height() + 10)
          rect.x(arrow.points()[0] - textNode.width() / 2 - 5)
          rect.y(arrow.points()[1] - textNode.height() - 5)
          textGroup.draw()
          document.body.removeChild(textarea)
        }
      }
      setTimeout(() => {
        window.addEventListener('click', handleOutsideClick)
      })
    })
    arrowRect.on('mousemove', () => {
      this.status = 'disable'
      layer.getParent().container().style.cursor = 'pointer'
    })
    arrowRect.on('mouseout', () => {
      if (this.status !== 'disable') this.status = 'drawing'
      layer.getParent().container().style.cursor = 'crosshair'
    })
    arrowRect.on('dragmove', () => {
      arrow.points([arrow.points()[0], arrow.points()[1], arrowRect.x() + 3, arrowRect.y() + 3])
    })

    textGroup.add(arrowRect)
    textGroup.add(arrow)
    textGroup.add(rect)
    textGroup.add(textNode)
    layer.add(textGroup)
    store.drawingAction.setHistory(id, [id])
  }
}
